<!--
 * @Author: caihongtai caihongtai
 * @Date: 2025-02-12 07:29:04
 * @LastEditors: caihongtai caihongtai
 * @LastEditTime: 2025-02-13 11:24:48
 * @FilePath: /ai-interview-vue/src/components/RadarChart/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="radar-container">
        <!-- 分数显示容器 -->
        <div class="score-container">
            <div class="score">{{ Math.round(score) }}</div>
            <div class="score-text">面试得分</div>
        </div>
        <!-- echarts 容器 -->
        <div ref="chart" class="radar-chart"></div>
    </div>
</template>

<script setup>
    import { ref, onMounted, watch, onUnmounted } from 'vue'
    import * as echarts from 'echarts'

    const props = defineProps({
        data: {
            type: Array,
            required: true,
        },
        indicators: {
            type: Array,
            required: true,
        },
        score: {
            type: Number,
            default: 0,
        }
    })

    const chart = ref(null)
    let chartInstance = null

    const initChart = () => {
        if (!chart.value) return

        chartInstance = echarts.init(chart.value)
        const option = {
            radar: {
                indicator: props.indicators.map(indicator => ({
                    name: indicator.name,
                    max: indicator.max || 100,
                })),
                radius: '65%',
                center: ['50%', '50%'],
                shape: 'polygon',
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#E8E8E8',
                        width: 1
                    }
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#E8E8E8',
                        width: 1,
                        type: 'dashed'
                    }
                },
                splitArea: {
                    show: false
                },
                name: {
                    show: true,
                    formatter: '{value}',
                    textStyle: {
                        color: '#86909C',
                        fontSize: 14,
                        padding: [3, 2]  // 调整文字位置
                    }
                }
            },
            series: [{
                type: 'radar',
                data: [{
                    value: props.data,
                    name: '得分',
                    areaStyle: {
                        color: 'rgba(22, 93, 255, 0.1)'
                    },
                    lineStyle: {
                        color: 'rgba(22, 93, 255, 1)',
                        width: 1
                    },
                    symbol: 'circle',
                    symbolSize: 4,
                    itemStyle: {
                        color: 'rgba(22, 93, 255, 1)'
                    },
                    label: {
                        show: false
                    }
                }]
            }]
        }

        chartInstance.setOption(option)
    }

    // 监听数据变化
    watch(
        () => [props.data, props.score],
        () => {
            initChart()
        },
        { deep: true }
    )

    // 监听窗口大小变化
    const handleResize = () => {
        chartInstance && chartInstance.resize()
    }

    onMounted(() => {
        initChart()
        window.addEventListener('resize', handleResize)
    })

    onUnmounted(() => {
        window.removeEventListener('resize', handleResize)
        chartInstance && chartInstance.dispose()
    })
</script>

<style lang="scss" scoped>
    .radar-container {
        width: 100%;
        height: 300px;
        position: relative;
    }

    .radar-chart {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }

    .score-container {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        z-index: 2; // 确保在雷达图上层
        pointer-events: none; // 避免影响雷达图的交互

        .score {
            font-size: 48px;
            font-weight: bold;
            color: rgba(22, 93, 255, 1);
            line-height: 1.2;
        }

        .score-text {
            font-size: 12px;
            color: rgba(29, 33, 41, 1);
            margin-top: 4px;
        }
    }
</style>